<html xmlns:th="http://www.thymeleaf.org">
<link type="text/css" href="/topjui/css/myui.css" rel="stylesheet"/>
<!--引入引入kindeditor编辑器相关文件-->
<link rel="stylesheet" href="/static/plugins/kindeditor/themes/default/default.css"/>
<script charset="utf-8" src="/static/plugins/kindeditor/kindeditor-all.js"></script>
<script charset="utf-8" src="/static/plugins/kindeditor/lang/zh-CN.js"></script>
<style>
    .editTable {
        margin: 10px 20px;
    }
    .editTable .label {
        font-size: 12px;
        min-width: 61px;
        max-width: 131px;
        text-align: right;
        font-weight: 400;
        padding-top: 10px;
        vertical-align: top;
        font-family: "microsoft yahei","Times New Roman","宋体",Times,serif;
    }
</style>
<form id="customerform" method="post" style="padding-top:1px">
    <input type="hidden" id="id" name="id" th:value="${bean.id}">
    <table class="editTable">
        <tr>
            <td class="label">栏目名称</td>
            <td>
                <input type="text" name="title"  class="selectp" data-options="required:true,readonely:true" style="width:212px;" th:value="${bean.title}">
            </td>
        </tr>
        <tr>
            <td class="label">栏目内容</td>
            <td>
               <textarea id="content" name="content" style="width:680px;height:420px;visibility:hidden;" th:text="${bean.content}"></textarea>
            </td>
        </tr>
    </table>
</form>
<script type="text/javascript">
     $(function () {
         KindEditor.create('textarea[id="content"]', {
                items: ['source', '|', 'undo', 'redo', '|', 'preview', 'print', 'template', 'code', 'cut', 'copy', 'paste',
                    'plainpaste', 'wordpaste', '|', 'justifyleft', 'justifycenter', 'justifyright',
                    'justifyfull', 'insertorderedlist', 'insertunorderedlist', 'indent', 'outdent', 'subscript',
                    'superscript', 'clearhtml', 'quickformat', 'selectall', '|', 'fullscreen', '/',
                    'formatblock', 'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold',
                    'italic', 'underline', 'strikethrough', 'lineheight', 'removeformat', '|',"image", 'multiimage',
                    '|','insertfile', '|','table', 'hr', 'emoticons', 'baidumap', 'pagebreak',
                    'anchor', 'link', 'unlink'],
                uploadJson: '/files/fileUpload',//指定上传图片的服务器端程序
                fileManagerJson: '/files/fileManager',//指定浏览远程图片的服务器端程序
                allowFileManager: true,
                afterChange: function(){  //利用该方法处理当富文本编辑框失焦之后，立即同步数据
                    KindEditor.sync('textarea[id="content"]') ;
                }
         });
     });
</script>
</html>